<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-16 17:20:11
 * @LastEditTime: 2023-12-27 15:57:10
 * @LastEditors: huangshuai 
-->
<template>
  <div class="report">
    <div class="title">
      感谢你为社区环境管理做出更多贡献，请填写您的意见吧！
    </div>
    <el-card style="width: 65%; height: 500px">
      <div style="width: 100%; display: flex; flex-wrap: wrap">
        <div style="width: 100%; padding: 0 20px">
          <el-form
            :model="form"
            style="width: 100%"
            ref="ruleFormRef"
            :rules="rules"
          >
            <el-form-item prop="desc">
              举报内容：
              <el-input
                v-model="form.desc"
                :rows="3"
                type="textarea"
                :placeholder="`如果您有举报对象，格式请按照如下填写，管理员处理效率更高哦。\n例如: 我举报 xx栋xx号 业主 张xx 高空抛物，宠物未打疫苗。`"
                style="width: 95%; margin-top: 5px"
                @paste.native.capture.prevent="pasting($event)"
                v-html="imagesInput"
              />
              <div></div>
            </el-form-item>
            <el-form-item>
              位置信息：
              <el-input
                v-model="form.address"
                style="width: 40%;"
                :placeholder="'请输入您要举报的对象的地址'"
              />
              <div></div>
            </el-form-item>
            <el-form-item>
              附带图片：
              <FilesUpload
                v-model:uidList="uidList"
                v-model:files="files"
                :uploadType="1"
                label="选择举报的图片"
              ></FilesUpload>
            </el-form-item>

            <!-- 分割线start -->
            <div
              style="
                width: 100vw;
                height: 2px;
                background-color: black;
                margin-left: -100px;
                margin-top: 50px;
              "
            ></div>
            <!-- 分割线end -->
            <el-form-item
              label="举报分类"
              style="margin-top: 25px; line-height: 50px"
              prop="type"
            >
              <el-radio-group v-model="form.type" style="margin-top: -18px">
                <el-radio label="0">宠物方面</el-radio>
                <el-radio label="1">住户方面</el-radio>
                <el-radio label="2">社区管理人方面</el-radio>
                <el-radio label="3">其它</el-radio>
              </el-radio-group>
              <div style="width: 40px"></div>
              <el-button
                style="height: 50px"
                type="primary"
                @click="handleSend(ruleFormRef)"
                >提交给社区管理员</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { addReportInfo } from "@/api/owner";
import { uploadFile } from "@/api/file";
import FilesUpload from "@/view/components/files-upload.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
const router = useRouter();
const form = reactive<FormData>({
  address: "",
  desc: "",
  type: "",
});
interface FormData {
  address: string;
  desc: string;
  type: string;
}
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<FormData>>({
  address: [{required: true, message: "请输入事件发生地点", trigger: "blur"}],
  desc: [{ required: true, message: "请输入举报内容", trigger: "blur" }],
  type: [
    {
      required: true,
      message: "请选择举报类型",
      trigger: "change",
    },
  ],
});

const imagesInput = ref();
const uidList = ref([]);
const files = ref([]);
const urlList = ref<string>("");
const uidNameList = ref<string[]>([]);
const handleSend = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      urlList.value = "";
      uidList.value.forEach(
        (item: { pictureRealPath: string; uuidName: string }) => {
          urlList.value += item.pictureRealPath;
        }
      );
      uidNameList.value = [];
      uidList.value.forEach(
        (item: { pictureRealPath: string; uuidName: string }) => {
          uidNameList.value.push(item.uuidName);
        }
      );

      uidNameList.value.forEach(async (item: string, index: number) => {
        await uploadFile(files.value[index], item, 1).then(() => {});
      });
      await addReportInfo({
        address: form.address,
        content: form.desc,
        reportCategory: form.type,
        pictureUrl: urlList.value,
      }).then((res: any) => {
        ElMessage({
          message: res.message,
          type: "success",
        });
        router.push("/owner/report-apply");
      });
    }
  });
};
const pasting = (event: any) => {
  // console.log(typeof event.clipboardData.getData("Text"));

  if (
    typeof event.clipboardData.getData("Text") === "string" &&
    event.clipboardData.getData("Text") != ""
  ) {
    form.desc += event.clipboardData.getData("Text");
  } else {
    const items = event.clipboardData.items;
    var file;
    for (let i = 0; i < items.length; i++) {
      if (items[0].type.indexOf("image") !== -1) {
        file = items[i].getAsFile();
        console.log(file);
        const blob = items[i].getAsFile();
        const reader = new FileReader();
        reader.onload = (e: any) => {
          imagesInput.value += '<img src="' + e.target.result + '" />';
        };
        reader.readAsDataURL(blob);
      }
    }
  }
  // console.log(event.clipboardData);
};
</script>

<style scoped lang="less">
.report {
  color: black;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  padding-top: 50px;
  .title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 50px;
  }
}
</style>
